<template>
  <div>
    <!-- 搜索框 -->
    <el-input
      v-model="searchQuery"
      placeholder="请输入搜索内容"
      clearable
      @clear="handleSearchClear"
      @input="handleSearchInput"
      style="margin-bottom: 20px; width: 300px;">
      <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </el-input>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="序号" width="80" />
      <el-table-column prop="model" label="车型" width="120" />
      <el-table-column prop="train_number" label="车号" width="120" />
      <el-table-column prop="terminal_number" label="端号" width="80" />
      <el-table-column prop="timestamp" label="时间" width="160" />
      <el-table-column prop="fault_name" label="故障名称" min-width="200" />
      <el-table-column prop="fault_image" label="故障照片" width="120">
        <template #default="{ row }">
          <!-- 图片加载失败时显示占位图 -->
          <img :src="row.fault_image" alt="故障照片" height="50px" @error="handleImageError">
        </template>
      </el-table-column>
      <el-table-column prop="fault_description" label="故障描述" min-width="300" />
      <el-table-column prop="handling_method" label="处理方法" min-width="150" />
    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px; text-align: center;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { fetchListFaultDataAll } from '@/api/article'

export default {
  data() {
    return {
      tableData: [], // 存储从接口获取的表格数据
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示的条数
      total: 0, // 数据总条数
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      searchQuery: '', // 存储搜索框的输入内容
      loading: false // 控制加载状态
    }
  },
  mounted() {
    this.fetchData() // 页面加载时获取数据
  },
  methods: {
    // 获取表格数据
    fetchData() {
      this.loading = true // 开始加载数据
      // 如果有搜索内容，加入查询条件
      if (this.searchQuery) {
        this.listQuery.title = this.searchQuery
      } else {
        this.listQuery.title = undefined
      }

      fetchListFaultDataAll(this.listQuery)
        .then(response => {
          if (response && response.data && response.data.items) {
            this.tableData = response.data.items // 获取表格数据
            this.total = response.data.total // 获取总数据量
          } else {
            // 如果返回的数据格式不符合预期，提示错误
            console.error('接口返回数据格式不正确', response)
            this.$message.error('数据格式错误，请联系管理员')
          }
        })
        .catch(error => {
          console.error('数据请求失败:', error)
          // 输出详细的错误信息
          if (error.response) {
            // 请求已发送且服务器响应了状态码，但状态码超出了2xx范围
            console.error('响应错误:', error.response)
            this.$message.error(`请求失败，状态码：${error.response.status}`)
          } else if (error.request) {
            // 请求已发送，但没有收到响应
            console.error('请求未收到响应:', error.request)
            this.$message.error('服务器未响应，请检查网络')
          } else {
            // 其他错误
            console.error('请求配置错误:', error.message)
            this.$message.error('请求配置错误，请稍后重试')
          }
        })
        .finally(() => {
          this.loading = false // 完成加载
        })
    },
    // 搜索框输入时触发
    handleSearchInput() {
      this.listQuery.page = 1 // 重置为第一页
      this.fetchData() // 更新数据
    },
    // 搜索框清空时触发
    handleSearchClear() {
      this.searchQuery = '' // 清空搜索内容
      this.listQuery.title = undefined // 清除查询条件
      this.fetchData() // 更新数据
    },
    // 点击搜索按钮时触发
    handleSearch() {
      this.listQuery.page = 1 // 重置为第一页
      this.fetchData() // 更新数据
    },
    // 分页大小变化时触发
    handleSizeChange(newSize) {
      this.listQuery.limit = newSize
      this.listQuery.page = 1 // 重置到第一页
      this.fetchData() // 更新数据
    },
    // 当前页变化时触发
    handleCurrentChange(newPage) {
      this.listQuery.page = newPage
      this.fetchData() // 更新数据
    },
    // 图片加载失败时使用默认图片
    handleImageError(event) {
      event.target.src = 'default_image.jpg' // 替换为默认图片
    }
  }
}
</script>

<style scoped>
/* 可以根据需要调整样式 */
.el-table th {
  background-color: #f4f4f4;
}
.el-table td {
  word-break: break-word;
  white-space: normal;
}
</style>
